<template>
	<!-- 各类彩票比赛列表 -->
	<view>
		<view class="header flex">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view class="flex" @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c" v-if="type_id == 1" @click="isShowPass = !isShowPass">
					<text class="pageTitle">{{pageTitle}}</text>
					<uni-icons type="arrowdown" size="14" color="#fff"></uni-icons>
				</view>

				<view class="flex-c" v-if="type_id == 4" @click="isShowluckyThreeD = !isShowluckyThreeD">
					<text class="pageTitle">{{pageTitle}}</text>
					<uni-icons type="arrowdown" size="14" color="#fff"></uni-icons>
				</view>

				<view class="flex-c doubleColor" v-if="type_id == 2 || type_id == 3">
					<text class="pageTitle">{{pageTitle}}</text>
					<text class="smallTitle">{{smallTitle}}</text>
					<!-- <uni-icons type="arrowdown" size="14" color="#fff"></uni-icons> -->
				</view>
				<view class="share flex" v-if="type_id == 1">
					<text class="select">筛选</text>
					<!-- <image src="../../static/index/screening.png" v-if="type_id == 1"></image> -->
					<uni-icons type="list" size="24" color="#fff"></uni-icons>
				</view>
				<view class="share flex" v-if="type_id == 2 || type_id == 3 || type_id == 4">
					<!-- <text class="select">筛选</text> -->
					<image src="../../static/index/class.png"></image>
					<!-- <uni-icons type="list" size="24" color="#fff"></uni-icons> -->
				</view>
			</view>
		</view>
		<view class="holder">

		</view>
		<football v-if="type_id == 1" :match_list="match_list" @fnGetData="fnGetData" @fnShowMore="fnShowMore" @getMoreData="getMoreData"
		 ref="delete"></football>
		<!-- <randomNine v-if="type_id == 3"></randomNine> -->
		<doubleColorBall v-if="type_id == 2" :pageTitle="pageTitle" :smallTitle="smallTitle" :historyList="historyList"
		 :lottery_pool_amount="lottery_pool_amount"></doubleColorBall>
		<bigHappy v-if="type_id == 3" :pageTitle="pageTitle" :smallTitle="smallTitle" :historyList="historyList"
		 :lottery_pool_amount="lottery_pool_amount"></bigHappy>
		<!--福彩3d-->
		<luckyThreeD v-if="type_id == 4" :luckyThreeD_type="isluckyThreeD" :obj="obj"></luckyThreeD>
		<view class="holder1" v-if="type_id == 1">
		</view>
		<view class="bot" v-if="type_id == 1">
			<!-- <view class="num flex">
				共<text>0</text>注<text>0</text>元
			</view> -->
			<view class="oper flex-bc">
				<uni-icons type="trash" size="24" color="#666" @click="fnDeleteMatch()"></uni-icons>
				<text class="warmming">{{warmming}}</text>
				<view class="buyBtn flex-c" @click="fnBetMacth()">
					<text>投注</text>
				</view>
			</view>
		</view>
		<view class="typeBox" v-if="isShowPass" @click="isShowPass = !isShowPass">
			<view class="type_pass_item" v-for="(item,index) in pass_type_list" :key="index">
				<text class="type_pass_title">{{item.item}}</text>
				<view class="type_pass_list">
					<view class="type_pass_list_item" v-for="(innderItem,innerIndex) in item.list" :key="innerIndex" :class="index+1 == pass_type && innderItem.id == type ? 'active':''"
					 @click="fnChangePass(index+1,innderItem.id,innderItem.name)">
						{{innderItem.name}}
					</view>
				</view>
			</view>
		</view>
		<!--福彩3d-->
		<view class="typeBox  typeBox_border" v-if="isShowluckyThreeD" @click="isShowluckyThreeD = !isShowluckyThreeD">
			<view class="type_luckyThreeD" :class="isluckyThreeD==1?'type_luckyThreeD_color':''" @click="fnChangeLuckyThreeD(1)">直选普通</view>
			<view class="type_luckyThreeD   type_luckyThreeD_border" :class="isluckyThreeD==2?'type_luckyThreeD_color':''"
			 @click="fnChangeLuckyThreeD(2)">组三单试</view>
			<view class="type_luckyThreeD" :class="isluckyThreeD==3?'type_luckyThreeD_color':''" @click="fnChangeLuckyThreeD(3)">组三复试</view>
			<view class="type_luckyThreeD  type_luckyThreeD_border" :class="isluckyThreeD==4?'type_luckyThreeD_color':''" @click="fnChangeLuckyThreeD(4)">组六普通</view>
		</view>

		<view class="modal flex-c" v-if="showMore">
			<moreMatch @fnShowMore="fnShowMore" :moreData="moreData" :match_data="match_data" @fnGetMatchData="fnGetMatchData"></moreMatch>
		</view>
	</view>
</template>

<script>
	import football from "../components/football.vue"
	import moreMatch from '@/pages/components/moreMatch.vue'
	import doubleColorBall from "../components/doubleColorBall.vue"
	import luckyThreeD from "../components/luckyThreeD.vue"
	import bigHappy from "../components/bigHappy.vue"
	import randomNine from "../components/randomNine.vue"
	export default {
		components: {
			football,
			doubleColorBall,
			luckyThreeD,
			randomNine,
			bigHappy,
			moreMatch
		},
		data() {
			return {
				isluckyThreeD: 1,
				// hackReset:'',
				token: uni.getStorageSync('token'),
				type_id: '',
				pass_type: '1', //默认 过关
				type: '1', //默认混合投注
				lucky_type_list: ["3D-直选普通", "3D-组三单试", "3D-组三复试", "3D-组六普通"],
				pass_type_list: [{
						item: '过关',
						list: [{
							id: 1,
							name: '混合投注'
						}, {
							id: 2,
							name: '胜平负'
						}, {
							id: 3,
							name: '半全场'
						}, {
							id: 4,
							name: '比分'
						}, {
							id: 5,
							name: '进球数'
						}]
					},
					{
						item: '单关',
						list: [{
							id: 2,
							name: '胜平负'
						}, {
							id: 3,
							name: '半全场'
						}, {
							id: 4,
							name: '比分'
						}, {
							id: 5,
							name: '进球数'
						}]
					}
				],
				pageTitle: '混合投注',
				smallTitle: '',
				// isShowList:true,
				isShowPass: false,
				isShowluckyThreeD: false,
				warmming: '非单关至少选择两场比赛',
				match_list: [],
				match_data: [],
				isTrue: true,
				showMore: false,
				moreData: [],
				historyList: [],
				lottery_pool_amount: '',
				is_single: false, //非单
				obj: [], //投注界面返回来的数据（数据里面是注数和购物车）
			};
		},

		onLoad(option) { //页面传参必须在onload 
			this.type_id = option.type_id
			if (option.type_id == 1) {
				this.fnGetMatchList()
			} else if (option.type_id == 2 || option.type_id == 3) {
				this.getDoubleColorHistoryResult()
			}
			if (this.type_id == 4) {
				this.pageTitle = this.lucky_type_list[0]
			}

		},
		onShow() {
			// this.hackReset = false;
			// this.$nextTick(() => {
			// 	this.hackReset = true;
			// })
			var that = this
			uni.$on('is_single', function(data) {
				console.log(data)
				that.is_single = data
			})

			uni.$on('deleteSingle', function(data) {

				if ((that.match_data.length - 1) > 0) {
					that.warmming = '已选择' + (that.match_data.length - 1) + '场比赛'
				} else {
					that.warmming = '非单关至少选择两场比赛'
				}
				var idx = that.findElem(that.match_data, 'match_id', data)
				that.match_data.splice(idx, 1)
				that.match_list.forEach((item, index) => {
					item.list.forEach((innerItem, innerIndex) => {
						if (innerItem.match_id == data) {
							that.$set(innerItem, 'status', false)

							innerItem.bet_data.spf_data.value.forEach(spfItem => {
								that.$set(spfItem, 'status', false)
							})
							innerItem.bet_data.rqspf_data.value.forEach(rqspfItem => {
								that.$set(rqspfItem, 'status', false)
							}) //
							innerItem.bet_data.jqs_data.value.forEach(jqsItem => {
								that.$set(jqsItem, 'status', false)
							})
							innerItem.bet_data.bqc_data.value.forEach(bqcItem => {
								that.$set(bqcItem, 'status', false)
							})
							innerItem.bet_data.bfw_data.value.forEach(bfwItem => {
								that.$set(bfwItem, 'status', false)
							})
							innerItem.bet_data.bfl_data.value.forEach(bflItem => {
								that.$set(bflItem, 'status', false)
							})
							innerItem.bet_data.bfd_data.value.forEach(bfdItem => {
								that.$set(bfdItem, 'status', false)
							})
						}
					})

				})
 
			})



		},
		methods:{
			//判断数组中某个值的属性是否存在
			findElem(arrayToSearch, attr, val) {
				for (var i = 0; i < arrayToSearch.length; i++) {
					if (arrayToSearch[i][attr] == val) {
						return i;
					}
				}
				return -1;
			},
			customFun(obj) { //福彩3d投注页面中调用$vm注册的方法，传递过来的数据
				if (obj) {
					this.obj = obj
				}
			},
			// 双色球
			getDoubleColorHistoryResult() {
				var url
				if (this.type_id == 2) {
					url = '/czb/doublecolor_bet/getDoubleColorHistoryResult'
				} else if (this.type_id == 3) {
					url = '/czb/bighappy_bet/getBigHappyHistoryResult'
				}
				uni.showToast({
					title: '加载中',
					duration: 2000,
					icon: 'loading'
				})
				this.request({
					url: url,
					method: 'POST',
					data: {
						'token': this.token,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						this.historyList = ret.data.list
						this.lottery_pool_amount = ret.data.lottery_pool_amount
						if (this.type_id == 2) {
							this.pageTitle = '双色球 ' + ret.data.issue_num + '期'
						} else if (this.type_id == 3) {
							this.pageTitle = '大乐透 ' + ret.data.issue_num + '期'
						}

						this.smallTitle = ret.data.end_time
						uni.hideToast()
					}
				})
			},
			fnChangeLuckyThreeD(type) { //福彩3d
				this.isluckyThreeD = type
				this.pageTitle = this.lucky_type_list[type - 1];

			},
			fnChangePass(pass_type, type, name) {
				if (pass_type == this.pass_type && type == this.type) return

				this.pass_type = pass_type
				this.type = type
				if (pass_type == 2) {
					this.pageTitle = name + '(单关)'
				} else {
					this.pageTitle = name
				}
				this.fnGetMatchList()
			},
			fnGoBack() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			fnGetMatchList() {
				uni.showToast({
					title: '加载中',
					duration: 2000,
					icon: 'loading'
				})
				this.request({
					url: '/czb/football_bet/getMatchList',
					method: 'POST',
					data: {
						'token': this.token,
						'pass_type': this.pass_type,
						'type': this.type,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						this.match_list = ret.data
						this.match_list.forEach((item, index) => {
							this.$set(item, 'status', true)
							console.log(item)
							item.list.forEach((innerItem, innerIndex) => {
								this.$set(innerItem, 'status', false)
							})
						})
						console.log(this.match_list)
					}
				})
			},
			fnGetData(e) {
				this.match_data = e
				var arr = this.match_data.map(o => o.match_id)
				arr = new Set(arr)
				if (arr.size) {
					this.warmming = '已选择' + arr.size + '场比赛'
				} else {
					this.warmming = '非单关至少选择两场比赛'
				}
			},
			fnShowMore(e) {
				this.showMore = e
			},
			getMoreData(e) {
				console.log(e)
				this.moreData = e
			},
			fnGetMatchData(e) {
				this.match_data = e
				console.log(this.match_data)
				var arr = this.match_data.map(o => o.match_id)
				arr = new Set(arr)
				if (arr.size) {
					this.warmming = '已选择' + arr.size + '场比赛'
				} else {
					this.warmming = '非单关至少选择两场比赛'
				}

				if (this.match_data.length == 0) {
					this.match_list.forEach((item, index) => {
						item.list.forEach((innerItem, innerIndex) => {
							innerItem.status = false
						})
					})
				}
			},
			//删除所有选择项
			fnDeleteMatch() {
				if (!this.match_data.length) return
				this.$refs.delete.fnDeleteMatchList();
			},
			// 去投注页面
			fnBetMacth() {
				if (!this.match_data.length) return uni.showToast({
					icon: "none",
					title: "最少选择一场比赛"
				})
				if (this.pass_type == 1) {
					var arr = this.match_data.map(o => o.match_id)
					arr = new Set(arr)
					if (arr.size < 2 && !this.is_single) return uni.showToast({
						icon: "none",
						title: "非单关赛事，至少选择两场比赛"
					})
				}
				var data = {
					'pass_type': this.pass_type,
					'type': this.type,
					'match_data': this.match_data,
					'token': this.token,
					'store_id': 1
				}
				data = JSON.stringify(data)
				console.log(data)
				uni.navigateTo({
					url: `/pages/bets/bets?data=${data}&bet_type=${this.type_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
	}



	.typeBox {
		padding: 0 20rpx 30rpx;
		background: #fff;
		position: fixed;
		/*  #ifdef  H5  */
		top: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		top: 150rpx;
		/*  #endif  */
		left: 0;
		// height: 500rpx;
		z-index: 100;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;

		.type_luckyThreeD_color {
			color: red;
		}

		.type_luckyThreeD_border {
			box-sizing: border-box;
			border-left: 1rpx solid #eee;
		}

		.type_luckyThreeD {
			width: 50%;
			float: left;
			text-align: center;
			line-height: 2;
			font-size: 32rpx;
			border-bottom: 1rpx solid #eee;
		}

		.type_pass_item {
			margin-top: 32rpx;
			font-size: 30rpx;

			.type_pass_list {
				.type_pass_list_item {
					display: inline-block;
					font-size: 28rpx;
					width: 196rpx;
					height: 68rpx;
					border: 1rpx solid #ccc;
					border-radius: 10rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 68rpx;
					margin: 30rpx 20rpx 0;
				}

				.active {
					background: #F22F29;
					border: none;
					color: #fff;
				}
			}
		}
	}

	.typeBox_border {
		border-bottom: none;
		padding: 0;
	}


	.header {
		width: 100%;
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
		background: #F22F29;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		align-items: center;

		.status-bar {
			height: var(--status-bar-height);
		}

		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			height: 100%;
			padding-top: var(--status-bar-height);
			box-sizing: border-box;

			view {
				flex: 1;
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;

				.pageTitle {
					margin-right: 15rpx;
					white-space: nowrap;
				}
			}

			.doubleColor {
				flex-direction: column;
				font-size: 32rpx;

				.smallTitle {
					font-size: 24rpx;
				}
			}

			.share {
				justify-content: flex-end;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin-right: 20rpx;
				}

				.select {
					padding: 20rpx;
				}
			}
		}
	}

	.holder {
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
	}

	.holder1 {
		// height: 192rpx;
		height: 104rpx;
	}

	// .top{
	// 	width: 100%;
	// 	// position: fixed;
	// 	// left: 0;

	// 	margin-bottom: 10rpx;

	// 	.time{
	// 		height: 74rpx;
	// 		padding-left: 20rpx;
	// 		background: #fff;
	// 		width: 100%;
	// 		box-sizing: border-box;
	// 		border-bottom: 1rpx solid #eee;
	// 		.timeBox{
	// 			font-size: 24rpx;
	// 			color: #666;
	// 			text{
	// 				margin-right: 26rpx;
	// 			}
	// 		}
	// 		image{
	// 			width: 30rpx;
	// 			height: 30rpx;
	// 			padding: 20rpx;
	// 			// transform: rotate(180deg);
	// 		}
	// 	}
	// }
	.bot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		color: #666;

		.num {
			width: 100%;
			height: 88rpx;
			background: #eee;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			text {
				color: #F22F29;
				margin: 0 10rpx;
			}
		}

		.oper {
			width: 100%;
			height: 104rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;

			.buyBtn {
				width: 209rpx;
				height: 74rpx;
				background: #F22F29;
				border-radius: 37rpx;
				color: #fff;
			}
		}
	}
</style>
